import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import reqwest from 'reqwest';
import {Link} from 'dva/router'
import {AutoComplete, Button,Row,Col,Icon,Layout,Input,Form,Breadcrumb,Select,Affix,message,notification,Modal,Spin} from 'antd';
import style from '../../../styles/ResetInput.less';
import inStyle from '../../../styles/Info.less';
import {numvail,selectvail} from '../../../utils/Validator.js'
import {reqwest_post} from '../../../utils/Reqwest.js'
const phoneReg =/^1[34578]\d{9}$/g;
const FormItem = Form.Item;
const Option =Select.Option;
const AutoOption = AutoComplete.Option;
class Regions extends React.Component{
	constructor(props){
		super(props)
		this.state={
			result:[],
			disabled:false,
			// channels:JSON.parse(sessionStorage['regions']),
			loading:false,
			visible:false,
			spinning:false,
			pressEnter:undefined
		}
	}

	handleSubmit(e){
    // console.log(e)
    e.preventDefault();
    let _this=this;
    this.props.form.validateFields((err, values) => {
        // console.log(this.state.payMethods.match(/\d+/g));
        // let chaname= values.chaname!==undefined?values.chaname.match(/\d+/g)[0]:null;
      if (!err  ) {
   			this.setState({loading:true})
        console.log('Received values of form: ', values);
        // if(_this.props.location.pathname=='/app/editcha'){
					// _this.patchserver({
	      	//  	channel:{name:values.resetcha},
	      	//  	store:{name:values.storename,channel:chaname,contact:values.cantact,phone:values.iphone,address:values.address},
	      	// })
        // }else{
	      	// _this.loadserver({
	      	//  	channel:{name:values.resetcha},
	      	//  	store:{name:values.storename,channel:chaname,contact:values.cantact,phone:values.iphone,address:values.address},
	      	// })
	      // }
	      reqwest_post('/api/regions',{
	      	access_token:localStorage['token'],
	      	region_name:values.region_name,
	      	admin:{name:values.name,mobile:values.phone}
	      },(data)=>{
	      	if(data.status==="success"){
	      		// this.setState({})
	      		message.success("创建成功",0.5)
	      		_this.context.router.replace('/app/stores?current='+_this.props.location.query.current)
	      	} else {
	      		message.error(data.msg,0.5)
	      	}
	      })
	      this.setState({loading:false})
      }
    });
	}
	componentWillMount(){
		// this.getServer();
		// this.setState({new_region:this.props.location.query.region_id})
	}

	render(){
		const {result,channels,disabled} =this.state;
		const {getFieldDecorator}=this.props.form;
		const formItemLayout = {
      labelCol: { span: 7},
      wrapperCol: { span: 17 },
      style:{minWidth:200}
    };
    let _math=0;
    let _regions = [	{text:'渠道名称',id:'region_name',rule:{ rules:[{required:true,message:'请输入渠道名称'}] }},
    	{text:'渠道负责人',id:'name',rule:{ rules:[{required:true,message:'请输入运营主管'}] }},
    	{text:'手机号',id:'phone',rule:{ rules:[{required:true,message:'请输入手机号',validator:(rule,value,callback)=>{
        numvail(rule,value,callback)
      }} ]}}
    ]
    const _inputNode = _regions.map((data,index)=>{
    	// console.log(data)
    	return <Row key={index}>
				<Col sm={{span :8,pull:0,}} className={`${style.reset_col}`} xs={{span:24,pull:3}}>
					<FormItem  {...formItemLayout} label={data.text}>
						{getFieldDecorator(data.id,
							data.rule
						)(
							<Input className={`${style.ncc_reset_input}`} placeholder={data.text} />
						)}
					</FormItem>
				</Col>
			</Row>
    })
		return(
			<Layout >
				<Layout.Content className={`${style.berad}`} >
					<Row>
						<Breadcrumb  className={`${style.blue_dia_none}`}>
							<Breadcrumb.Item ><span className={`${style.blue_dia}`}></span></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div} ${style.bread_div_first}`}><Link to={{pathname:'/app/stores',query:{current:this.props.location.query.current}}}>渠道</Link></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div}`}>创建渠道</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
				</Layout.Content>
				<Layout style={{background:'#fff'}}>
					<Form className={`${inStyle.ncc_left_layout}`} style={{marginTop:30}} onSubmit={this.handleSubmit.bind(this)}>
						{_inputNode}
						<Row>
	       		<Col xl={{offset:3}} lg={{offset:2}} sm={{span :8,pull:0}} xs={{span:17,pull:3}}  >
		       		<div  style={{float:'left'}} >
		       			<FormItem >
			            <Button loading={this.state.loading} htmlType="submit" size='large' type="primary"  >
			              保存
			            </Button>
		          	</FormItem>
		          </div>
		          <div  style={{float:'left',marginLeft:10}} >
		          	<Button size='large'  >
			            <Link to={{pathname:'/app/stores',query:{current:this.props.location.query.current}}}>取消</Link>
			          </Button>
		          </div>
	          </Col>
          </Row>
					</Form>
				</Layout>
			</Layout>
		)
	}
}
Regions.contextTypes = {
  router: PropTypes.object
};
const RegionsForm = Form.create()(Regions);
export default connect()(RegionsForm)
